<template>
  <div>
    <el-form-item label="头像">
      <div class="crop-demo">
        <div class="el-upload" v-show="formData.avatar==''">
            <i class="el-icon-plus"></i>
        </div>
        <div class="crop-demo-file">
          <input
            class="crop-input"
            type="file"
            name="image"
            accept="image/*"
            @change="setImage"
          />
        </div>
         <img :src="formData.avatar" class="pre-img" v-show="formData.avatar!=''"/>
      </div>
    </el-form-item>
    <el-dialog title="裁剪图片" :visible.sync="dialogVisible" width="30%">
      <vue-cropper
        ref="cropper"
        :src="imgSrc"
        :ready="cropImage"
        :zoom="cropImage"
        :cropmove="cropImage"
        style="width:100%;height:300px;"
      ></vue-cropper>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelCrop">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import VueCropper from "vue-cropperjs";
export default {
  data() {
    return {
      defaultSrc: require("../../../assets/img/img.jpg"),
      imgSrc: "",
      dialogVisible: false,
      formData: {
        avatar: ""
      },
      imgData: ""
    };
  },
  props:{
    editImg:String
  },
  watch:{
    'editImg':function(){
      this.formData.avatar = this.editImg
    }
  },
  created() {
    this.formData.avatar = "";
  },
  methods: {
    setImage(e) {
      
      const file = e.target.files[0];
      if (!file.type.includes("image/")) {
        return;
      }
      const reader = new FileReader();
      reader.onload = event => {
        this.dialogVisible = true;
        this.imgSrc = event.target.result;
        this.$refs.cropper && this.$refs.cropper.replace(event.target.result);

        this.formData = {
          avatar: this.imgSrc
        };
        console.log(this.formData)
        this.$axios.post("/Upload/File", this.formData).then(res => {
          if (res.data.hasError == false) {
            this.imgData = res.data.data;
            this.$emit("uploadImg", this.imgData);
          }else {
            this.$message.error('头像不符合规则！')
            this.formData.avatar = this.defaultSrc;
          }
        });
      };
      reader.readAsDataURL(file);
    },
    cropImage() {
      this.formData.avatar = this.$refs.cropper.getCroppedCanvas().toDataURL();
    },
    cancelCrop() {
      this.dialogVisible = false;
      this.formData.avatar = this.defaultSrc;
    }
  },
  components: {
    VueCropper
  }
};
</script>

<style lang="scss">
.crop-demo{
    position: relative;
    .crop-demo-file{
        position: absolute;
        height: 100px;
        width: 100px;
        overflow: hidden;
        .crop-input{
            height: 100px;
            opacity: 0;
        }
    }
}
.el-upload{
    width: 100px;
    height: 100px;
    border: 1px dashed #c0ccda;
    background: #fbfdff;
    border-radius: 6px;
    text-align: center;
    line-height: 100px;
    .el-icon-plus{
        font-size: 28px;
        color: #8c939d;
    }
}
</style>